<template>
  <div v-loading="termsLoading">
    <template v-if="!isPlain">
      <div v-if="showHeader" class="area-header">
        <span class="area-header-title">{{ $t('关键条款') }}</span>
      </div>
      <div class="text item">
        <el-table tooltip-effect="darkTable" :data="tiaoKuan" :height="height" border>
          <el-table-column :label="$t('条款类型')" prop="name" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span class="link-type" @click="viewTerms(scope.row)">{{ typeFormat(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('触发状态')" width="150">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isTrigger" :type="scope.row.typeStatus">{{ $t(selectDictLabel(keyTermsStatusOptions, scope.row.isTrigger)) }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template v-if="isPlain">
      <Empty :data.sync="tiaoKuan" :style="'height:'+ height">
        <ul class="termsList" :style="'height:'+ height">
          <li v-for="v in tiaoKuan" :key="v.id">
            <div class="link-type" @click="viewTerms(v)">{{ typeFormat(v) }}</div>
            <el-tag v-if="v.isTrigger" size="mini" :type="v.typeStatus">{{ $t(selectDictLabel(keyTermsStatusOptions, v.isTrigger)) }}</el-tag>
          </li>
        </ul>
      </Empty>
    </template>
    <!-- 关键条款对话框 -->
    <el-dialog :title="$t('关键条款')" :visible.sync="dealTermsOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealContractTermsForm ref="dealContractTermsForm" />
    </el-dialog>
  </div>
</template>

<script>
  // 关键条款
  import { findListTerms } from '@/api/deal/terms/dealTerms'
  import dealContractTermsForm from '@/views/deal/terms/dealTermsForm'
  export default {
    components: {
      dealContractTermsForm
    },
    props: {
      businessId: {
        type: String,
        default: () => ''
      },
      showHeader: {
        type: Boolean,
        default: true
      },
      isPlain: {
        type: Boolean,
        default: () => false
      },
      height: {
        type: [Number, String],
        default: 200
      }
    },
    data() {
      return {
        dealTermsOpen: false,
        tiaoKuan: [],
        typeOptions: [],
        keyTermsStatusOptions: [],
        termsLoading: true
      }
    },
    computed: {
    },
    created() {
      this.getList()
      this.getDicts('key_terms_tyoe').then(response => {
        this.typeOptions = response.data
      })
      this.getDicts('key_terms_status').then(response => {
        this.keyTermsStatusOptions = response.data
      })
    },
    mounted: function() {
    },
    updated: function() {},
    methods: {
      // 获取关键条款
      getList() {
        this.termsLoading = true
        findListTerms(this.businessId).then(response => {
          this.tiaoKuan = []
          response.data.forEach(item => {
            this.getListTermsType(item.id, item.dealId, item.name, item.isTrigger, item.type)
          })
          this.termsLoading = false
        })
      },
      // 关键条款状态颜色
      getListTermsType(id, deal, itemName, value, type) {
        var typeTemp = ''
        if (value === 'YCL') {
          typeTemp = 'success'
        } else if (value === 'WCL') {
          typeTemp = 'danger'
        } else if (value === 'SX') {
          typeTemp = 'info'
        } else if (value === 'WCF') {
          typeTemp = 'warning'
        }
        const temp = {
          id: id,
          formDealId: deal,
          name: itemName,
          isTrigger: value,
          type: type,
          typeStatus: typeTemp
        }
        this.tiaoKuan.push(temp)
      },
      // 查看关键条款
      viewTerms(row) {
        this.dealTermsOpen = true
        this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          row.isSaveShow = 'hidden'
          this.$refs.dealContractTermsForm.init(row)
        })
      },
      // 类型字典回显
      typeFormat(row) {
        if (row.type) {
          return this.selectDictLabel(this.typeOptions, row.type)
        }
      }

    }
  }
</script>
<style lang="scss" scoped>
.termsList{
  overflow: auto;
  margin-right: -15px;
  padding-right: 15px;
  width: 100%;
  li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-size: 14px;
    border-bottom: 1px solid #EBEEF3;
    padding: 8px 20px;
    .link-type{
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
    }
    .el-tag{
      border: 0;
      padding: 1px 10px;
      border-radius: 10px;
      height: auto;
    }
  }
}
</style>
